<template>
  <div class="app-container">
     <span class="borderNone">
          <p class="shenqing">创建信息</p>
          <table border="1" rules="all" class="tablestyle">
            <tr>
              <td style="width: 164px;height: 34px;text-align: center;">创建人</td>
              <td style="width: 415px; padding-left: 10px;">
                {{sysUserName}}
              </td>
              <td style="width: 164px;height: 34px;text-align: center;">创建时间</td>
              <td style="width: 415px; padding-left: 10px;">{{formatDate(new Date)}}</td>
            </tr>
          </table>
        <p class="shenqing">盘点信息</p>
          <table border="1" rules="all" class="tablestyle">
            <tr>
              <td style="width: 164px;height: 34px;text-align: center;">计划开始时间</td>
              <td style="width: 415px">
                 <el-date-picker
                   v-model="form.planStart"
                   type="date"
                   value-format="yyyy-MM-dd"
                   placeholder="选择日期">
                 </el-date-picker>
              </td>
              <td style="width: 164px;height: 34px;text-align: center;">计划结束时间</td>
              <td style="width: 415px">
                 <el-date-picker
                   v-model="form.planEnd"
                   type="date"
                   value-format="yyyy-MM-dd"
                   placeholder="选择日期">
                 </el-date-picker>
              </td>
            </tr>
            <tr>
              <td style="width: 164px;height: 34px;text-align: center;">责任单位</td>
              <td style="width: 415px" class="leixing">
                 <treeselect style="width: 100%;height: 32px" v-model="form.chargeDeptId" :options="deptOptions" placeholder="请选择责任单位" />
              </td>
              <td style="width: 164px;height: 34px;text-align: center;">责任人</td>
              <td style="width: 415px;" class="leixing">
               <el-select v-model="form.chargeUserId" placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in optionszrr"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td style="width: 164px;height: 53px;text-align: center;">备注</td>
              <td  colspan="3" style="width: 415px" class="beizhu">
                <el-input
                  type="textarea"
                  autosize
                  :autosize="{ minRows: 2, maxRows: 2}"
                  placeholder="请输入内容"
                  v-model="form.remark">
                </el-input>
              </td>
            </tr>
          </table>
        </span>
    <p class="shenqing">盘点范围</p>
      <div style="margin-left: 15px">
        <div class="div-rido">
          <el-radio v-model="radio" label="1">所有</el-radio>
        </div>
        <div class="div-rido">
          <el-radio v-model="radio" label="2">责任人负责的设备</el-radio>
        </div>
        <div class="div-rido">
          <el-radio v-model="radio" label="3">指定设备</el-radio>
          
          <div style="margin-left:40px">
           
              <div style="margin-bottom:10px">
                <el-checkbox v-model="sys" :disabled="radio!=3" style="margin-right:10px">指定部门</el-checkbox>
                <el-select v-model="sysDept" :disabled="!sys" placeholder="请选择" multiple style="width: 300px">
                  <el-option
                    v-for="item in sysDeptList"
                    :key="item.id"
                    :label="item.deptName"
                    :value="String(item.id)">
                  </el-option>
                </el-select>
              </div>
              <div style="margin-bottom:10px">
                <el-checkbox v-model="deviceRep" label="4" :disabled="radio!=3" style="margin-right:10px">指定位置</el-checkbox>
                <el-select v-model="deviceRepositoryTreeVo" :disabled="!deviceRep" placeholder="请选择" multiple style="width: 300px">
                  <el-option
                    v-for="item in deviceRepositoryTreeVoList"
                    :key="item.id"
                    :label="item.repoName"
                    :value="String(item.id)">
                  </el-option>
                </el-select>
              </div>
              <div style="margin-bottom:10px">
                <el-checkbox v-model="device" label="5" :disabled="radio!=3" style="margin-right:10px">指定类别</el-checkbox>
                <el-select v-model="deviceType" :disabled="!device" placeholder="请选择" multiple style="width: 300px">
                  <el-option
                    v-for="item in deviceTypeList"
                    :key="item.id"
                    :label="item.deviceName"
                    :value="String(item.id)">
                  </el-option>
                </el-select>
              </div>
            
          </div>

        </div>
      </div>
    <div style="width: 80%;text-align: center;margin-top: 20px">
      <el-button type="primary" icon="el-icon-search" size="mini" @click="submit">提交</el-button>
    </div>

  </div>
</template>

<script>
  import {inventoryAdd,listUser,inventoryEdit,inventoryDes,inventoryDto,inventoryMap} from '@/api/inventory/index'
  import {formatDate} from '@/utils/index'
  import Cookies from 'js-cookie'
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "Role",
    components:{
      Treeselect,
    },
    data() {
      return {
        mineStatus: "",
        mineStatuswz:'',//指定位置
        mineStatuslb:'',//指定类别
        treedata: [],
        defaultProps: {
          children: "children",
          label: "label"
        },

        checkList: [],
        radio:'1',
        pandianrido:'1',//盘点范围
        form:{
          chargeDeptId: null,
          chargeUserId: null,
          planEnd: null,
          planStart: null,
          remark: null,
          deviceTakeStockTypeVos:[]
        },
        sysUserName:Cookies.get('username'),
        optionszrr:[],
        sys:false,
        deviceRep:false,
        device:false,
        sysDept:[],
        deviceRepositoryTreeVo:[],
        deviceType:[],
        sysDeptList:[],
        deviceRepositoryTreeVoList:[],
        deviceTypeList:[],
        deptOptions: undefined,
      };
    },
    created() {
      this.getTreeselect()
      this.getUserList()
      this.getMap()
      if(this.$route.query.id){
        
        this.getData()
      }
      
    },
    methods: {
      formatDate,
      getMap(){
        inventoryMap().then((res)=>{
          if(res.code==200){
            this.sysDeptList = res.data.sysDeptList
            this.deviceRepositoryTreeVoList = res.data.deviceRepositoryTreeVoList
            this.deviceTypeList=res.data.deviceTypeList
          }
        })
      },
      getData(){
        inventoryDes(this.$route.query.id).then((res)=>{
          if(res.code==200){
            let {chargeDeptId,chargeUserId,planEnd,planStart,remark,id} = res.data.deviceTakeStock
            this.form = {
              chargeDeptId,
              chargeUserId,
              planEnd,
              planStart,
              remark,
              id,
              deviceTakeStockTypeVos:res.data.deviceTakeStockTypeList
            }
            
            this.form.deviceTakeStockTypeVos.forEach((item,index)=>{
              this.initType(item)
            })
          }
        })
      },
      initType({checkType,lnventoryScope}){
        switch (String(checkType)) {
          case '1':
            this.radio='1'
            break;
          case '2':
            this.radio='2'
            break;
          case '3':
            this.radio='3'
            this.sys=true
            this.sysDept=lnventoryScope.split(',')
            break;
          case '4':
            this.radio='3'
            this.deviceRep=true
            this.deviceRepositoryTreeVo=lnventoryScope.split(',')
            break;
          case '5':
            this.radio='3'
            this.device=true
            this.deviceType=lnventoryScope.split(',')
            break;  
          default:
            break;
        }
      },
      getUserList(){
        //获取所有用户
        listUser().then((res)=>{
          if(res.code==200){
            this.optionszrr = res.rows
          }
        })
      },
      handleCheckChange(data, checked, node) {
        var res =this.$refs.tree.getCheckedNodes()
        console.log('res',res);
        var labelArr=[]
        var keyArr = []
        for (var i=0;i<res.length;i++ ){
          labelArr.push(res[i].label)
          keyArr.push(res[i].id)
        }
        console.log('labelArr',labelArr);
        console.log('keyArr',keyArr);
        this.mineStatus = labelArr;
      },
      //指定类别
      handleCheckChangelb:function(data, checked, node){
        var res =this.$refs.treelb.getCheckedNodes()
        console.log('res',res);
        var labelArr=[]
        var keyArr = []
        for (var i=0;i<res.length;i++ ){
          labelArr.push(res[i].label)
          keyArr.push(res[i].id)
        }
        console.log('labelArr',labelArr);
        console.log('keyArr',keyArr);
        this.mineStatuslb = labelArr;
      },
      //指定位置
      handleCheckChangewz:function(data, checked, node){
        var res =this.$refs.treewz.getCheckedNodes()
        console.log('res',res);
        var labelArr=[]
        var keyArr = []
        for (var i=0;i<res.length;i++ ){
          labelArr.push(res[i].label)
          keyArr.push(res[i].id)
        }
        console.log('labelArr',labelArr);
        console.log('keyArr',keyArr);
        this.mineStatuswz = labelArr;
      },

      /** 查询类别下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
          this.treedata =  response.data;
        });
      },
      //提交
      submit:function () {
        // {checkType:1,lnventoryScope: "", lnventoryScopeName: ""}
        if(!this.form.planStart){
          this.$message.warning('请输入计划开始时间')
          return false
        }
        if(!this.form.planEnd){
          this.$message.warning('请输入计划结束时间')
          return false
        }
        if(!this.form.chargeDeptId){
          this.$message.warning('请选择责任单位')
          return false
        }
        if(!this.form.chargeUserId){
          this.$message.warning('请选择责任人')
          return false
        }
        if(this.radio==3){
          this.form.deviceTakeStockTypeVos=[]
          if(this.sys){
            let lnventoryScope=[]
            let lnventoryScopeName=[]
            this.sysDept.forEach((i)=>{
              this.sysDeptList.forEach((j)=>{
                if(i==j.id){
                  lnventoryScope.push(j.id)
                  lnventoryScopeName.push(j.deptName)
                }
              })
              
            })
            let obj={checkType:'3',lnventoryScope: lnventoryScope.join(','), lnventoryScopeName: lnventoryScopeName.join(',')}
            this.form.deviceTakeStockTypeVos.push(obj)
          }
          if(this.deviceRep){
            let lnventoryScope=[]
            let lnventoryScopeName=[]
            this.deviceRepositoryTreeVo.forEach((i)=>{
              this.deviceRepositoryTreeVoList.forEach((j)=>{
                if(i==j.id){
                  lnventoryScope.push(j.id)
                  lnventoryScopeName.push(j.repoName)
                }
              })
              
            })
            let obj={checkType:'4',lnventoryScope: lnventoryScope.join(','), lnventoryScopeName: lnventoryScopeName.join(',')}
            this.form.deviceTakeStockTypeVos.push(obj)
          }
          if(this.device){
            let lnventoryScope=[]
            let lnventoryScopeName=[]
            this.deviceType.forEach((i)=>{
              this.deviceTypeList((j)=>{
                if(i==j.id){
                  lnventoryScope.push(i.id)
                  lnventoryScopeName.push(i.deviceName)
                }
              })
              
            })
            let obj={checkType:'5',lnventoryScope: lnventoryScope.join(','), lnventoryScopeName: lnventoryScopeName.join(',')}
            this.form.deviceTakeStockTypeVos.push(obj)
          }
        }else if(this.radio==1||this.radio==2){
          this.form.deviceTakeStockTypeVos=[{checkType:this.radio,lnventoryScope: "", lnventoryScopeName: ""}]
        }

        if(this.form.deviceTakeStockTypeVos.length<=0){
          this.$message.warning('请选择盘点范围')
          return false
        }
        if(this.form.id){
          //修改
          inventoryEdit(this.form).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              this.$router.push({path:'/equipmentGL/equipmentPD'})
            }
          })
        }else{
          //保存
          inventoryAdd(this.form).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              this.$router.push({path:'/equipmentGL/equipmentPD'})
            }
          })
        }
        
        
      },

    }
  };
</script>
<style>
  .app-container .borderNone .el-input--medium .el-input__inner {
    border: none;
  }
  .app-container .borderNone .el-textarea__inner {
    border: none;
  }
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;
  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .div-rido {
    margin-top: 15px;
  }
  .floxsty {
    display: flex;
    align-items: center;
  }
</style>
